/*
 * Copyright © 2015 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.less";
@import "../../styles/themes/cdap/mixins.less";

my-flow-graph, my-workflow-graph {
  .diagram-container div.tooltip .tooltip-inner {
    max-width: 250px;
  }
}

my-flow-graph {

  .diagram-container {
    border: 1px solid @table-border-color;
    background-color: @table-bg;

    .btn-group {
      margin: 15px;
    }
  }

  text {
    font-weight: 300;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    fill: @cdap-header;
  }

  .node rect {
    stroke: #999;
    fill: white;
    stroke-width: 1.5px;
  }

  .edgePath path {
    stroke-dasharray: 8px, 8px;
    stroke: @cdap-darkness;
    stroke-width: 2px;
  }

  .flowlet-svg {
    fill: white;
    cursor: pointer;
    stroke: @cdap-darkness;
    stroke-width: 5px;
  }

  .stream-svg {
    fill: white;
    cursor: pointer;
    stroke: @cdap-darkness;
    stroke-width: 5px;
  }

  .flowlet-events {
    fill: @cdap-orange;
    stroke: @cdap-darkness;
    stroke-width: 5px;
    cursor: pointer;
  }

  .flowlet-event-count {
    fill: white;
    font-size: 11px;
    text-anchor: middle;
  }

  .stream-events {
    fill: @brand-success;
    stroke: @cdap-darkness;
    stroke-width: 5px;
    cursor: pointer;
  }

  .stream-event-count {
    fill: white;
    font-size: 11px;
    text-anchor: middle;
  }

  .flowlet-instances {
    fill: #01ABED;
    stroke: @cdap-darkness;
    stroke-width: 2px;
  }

  .flowlet-instance-count {
    fill: @brand-primary;
    font-size: 18px;
    cursor: default;
    text-anchor: middle;
  }
}

my-workflow-graph {

  @green-outline: darken(@brand-success, 15%);
  @red-outline: darken(@brand-danger, 15%);
  @grey-outline: #989898;

  .diagram-container {
    border: 1px solid @table-border-color;
    background-color: @table-bg;
    border-radius: 4px;

    .btn-group {
      margin: 15px;
    }
  }

  marker {
    path {
      fill: @cdap-darkness;
    }
  }

  text {
    font-weight: 300;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
    font-size: 14px;
    font-weight: bold;
    fill: @cdap-header;
  }

  .node rect {
    stroke: #999;
    fill: white;
    stroke-width: 1.5px;
  }

  .edgePath path {
    stroke-dasharray: 8px, 8px;
    stroke: @cdap-darkness;
    stroke-width: 2px;
  }

  .job-svg {
    fill: white;
    stroke: @grey-outline;
    stroke-width: 10px;
    cursor: not-allowed;

    + .label text {
      cursor: not-allowed;
    }

    &.running, &.failed, &.completed, &.killed {
      cursor: pointer;

      + .label text {
        cursor: pointer;
      }
    }

    &.running {
      stroke: @green-outline;
    }

    &.killed {
      stroke: @brand-danger;
    }

    &.completed {
      fill: @brand-success;
      stroke: @green-outline;
    }

    &.failed {
      stroke: @red-outline;
    }
  }

  .end-svg, .start-svg {
    stroke-width: 7px;
    fill: white;
  }

  .start-svg { stroke: @green-outline; }
  .end-svg { stroke: @brand-primary; }

  .conditional-svg {
    fill: white;
    cursor: default;
    stroke: @cdap-orange;
    stroke-width: 10px;
  }

  .job-events {
    fill: @cdap-orange;
    stroke: #ebecf1;
    stroke-width: 2px;
    cursor: pointer;
  }

  .conditional-events {
    fill: @brand-success;
    stroke: white;
    stroke-width: 2px;
    cursor: pointer;
  }

  .workflow-token {
    fill: lighten(@grey-outline, 10%);
  }

  .token-label {
    fill: white;
    cursor: pointer;
  }
}
